<template>
  <view class="home">
    <uni-notice-bar show-icon scrollable :speed="70"
                    :text="quotation"/>
    <view class="card1">
      <view class="content">
        <uni-card title="总数据">
          <text style="color: red" class="uni-body">{{ total }}</text>
        </uni-card>
        <uni-card title="今日数据">
          <text class="uni-body">{{ todayTotal }}</text>
        </uni-card>
      </view>
      <view>
        <uni-card title="今日抓取进度" :extra="currentDate">
          <progress :percent="Math.round(todayTotal / 30 * 100)" show-info stroke-width="3"/>
        </uni-card>
      </view>
      <uni-card>
        <button class="grabButton" type="warn" @click="grabHandle()">抓取</button>
      </uni-card>
    </view>

    <view class="content card2">
      <uni-card title="语录来源" extra="Top5">
        <text class="uni-body" v-for="item in fromAddrTop">{{ `${item.fromAddr}&nbsp&nbsp${item.count}\n` }}</text>
      </uni-card>
      <uni-card title="语录作者" extra="Top5">
        <text class="uni-body" v-for="item in fromWhoTop">{{ `${item.fromWho}&nbsp&nbsp${item.count}\n` }}</text>
      </uni-card>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
import {
  getQuotationRecommendUsingPost,
  getQuotationStatisticsUsingPost,
  captureQuoteUsingGet
} from "@/servers/api/quotationDataController";

let timer: ReturnType<typeof setTimeout> | null = null;
export default Vue.extend({
  data() {
    return {
      quotation: '胜日寻芳泗水滨，无边光景一时新。 《春日》 ——— 朱熹 ———',
      total: 0 as number,
      todayTotal: 0 as number,
      fromAddrTop: [] as API.FromAddrStatistics[],
      fromWhoTop: [] as API.FromWhoStatistics[],
      currentDate: new Date().toLocaleTimeString()
    }
  },
  onLoad() {
    this.loadData()
    this.onSetTimeout()
  },
  onPullDownRefresh() {
    this.loadData()
    setTimeout(()=>{
      uni.stopPullDownRefresh()
    },2000)
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    async grabHandle() {
      const res = await captureQuoteUsingGet();
      if (res) {
        uni.showToast({
          title: '抓取任务已下发',
          mask: true,
          duration: 2000
        });
      }
    },
    onSetTimeout() {
      timer = setInterval(() => {
        this.currentDate = new Date().toLocaleTimeString()
      }, 1000);
    },
    clearTimer() {
      // clearTime
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
    },
    loadData() {
      this.getQuotationData();
      this.getStatisticsData();
    },
    async getQuotationData() {
      const params: API.QuotationDataRecommendQuery = {
        resetRecommend: 0
      }
      const data: API.QuotationDataRecommendVO = await getQuotationRecommendUsingPost(params) as API.QuotationDataRecommendVO;
      if (data === null) {
        return;
      }
      this.quotation = `${data.content}《${data.fromAddr}》 ——— ${data.fromWho} ———`;
    },
    async getStatisticsData() {
      const params: API.QuotationStatisticsQuery = {
        fromAddrQueryNum: 5,
        fromWhoQueryNum: 5
      }
      //@ts-ignore
      const data: API.QuotationStatistics = await getQuotationStatisticsUsingPost(params);
      if (data) {
        this.fromAddrTop = data.fromAddrTop || [];
        this.fromWhoTop = data.fromWhoTop || [];
        this.total = data.total || 0;
        this.todayTotal = data.todayTotal || 0;
      }
    }
  }
});
</script>

<style>
.home {
  margin: 5px;
}

.home .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.card1 {
  height: 100%;
  background: #ead9e4;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 0 0 5px 0;
}

.card2 {
  height: 100%;
  padding: 0 0 5px 0;
  background: #ead9e4;
  border-radius: 5px;
}
.grabButton{
  width: 90px;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
